<template>
  <div class="tv-container">
      <!-- 轮播图区域 -->
      <swiper></swiper>

      
      <b-container class="bv-example-row">
        <!-- 新鲜好剧区域 -->
        <div class="new-container">
          <div class="divier-text">
              <b-nav align="center">
                  <b-nav-item>新鲜好剧</b-nav-item>
              </b-nav>
          </div>
          <!-- 新鲜好剧内容区域区域 -->
          <b-row>
            <b-col cols="6" sm="6" md="3" lg="3" v-for="item in hotList" :key="item.tvId">
              <div class="tv-card">
                <div class="tv-img">
                  <router-link :to="'/tvInfo/' + item.tvId">
                    <img :src="item.tvImg" alt="">
                  </router-link>
                </div>
                <div class="tv-info">
                  <h5 class="tv-name"><router-link :to="'/tvInfo/' + item.tvId">{{ item.tvName }}</router-link></h5>
                  <p class="tv-intro">{{ item.tvIntro }}</p>
                </div>
              </div>
            </b-col>
          </b-row>
          <div class="page">
            <Page :current="allPages.pageNum" :total="allPages.total" simple @on-change="changePage" />
          </div>
        </div>
        <!-- 热剧精选区域 -->
        <div class="hot-container">
          <div class="divier-text">
              <b-nav align="center">
                  <b-nav-item>热剧精选</b-nav-item>
              </b-nav>
          </div>
          <!-- 热剧精选内容区域区域 -->
          <b-row>
            <b-col cols="6" sm="6" md="3" lg="3" v-for="item in chooseList" :key="item.tvId">
              <div class="hot-card">
                <div class="hot-img">
                  <router-link :to="'/tvInfo/' + item.tvId">
                    <img :src="item.tvImg" alt="">
                  </router-link>
                </div>
                <div class="hot-info">
                  <h5 class="hot-name"><router-link :to="'/tvInfo/' + item.tvId">{{ item.tvName }}</router-link></h5>
                  <p class="hot-intro">{{ item.tvIntro }}</p>
                </div>
              </div>
            </b-col>
          </b-row>
          <div class="page">
            <Page :current="allPagesNext.pageNum" :total="allPagesNext.total" simple @on-change="changePageChoose" />
          </div>
        </div>
        <!-- 国产好剧区域 -->
        <div class="new-container">
          <div class="divier-text">
              <b-nav align="center">
                  <b-nav-item>国产好剧</b-nav-item>
              </b-nav>
          </div>
          <!-- 国产好剧内容区域区域 -->
          <b-row>
            <b-col cols="6" sm="6" md="3" lg="3" v-for="item in guoList" :key="item.tvId">
              <div class="tv-card">
                <div class="tv-img">
                  <router-link :to="'/tvInfo/' + item.tvId">
                    <img :src="item.tvImg" alt="">
                  </router-link>
                </div>
                <div class="tv-info">
                  <h5 class="tv-name"><router-link :to="'/tvInfo/' + item.tvId">{{ item.tvName }}</router-link></h5>
                  <p class="tv-intro">{{ item.tvIntro }}</p>
                </div>
              </div>
            </b-col>
          </b-row>
        </div>
        <!-- 港台好剧区域 -->
        <div class="hot-container">
          <div class="divier-text">
              <b-nav align="center">
                  <b-nav-item>港台好剧</b-nav-item>
              </b-nav>
          </div>
          <!-- 港台好剧内容区域区域 -->
          <b-row>
            <b-col cols="6" sm="6" md="3" lg="3" v-for="item in gangList" :key="item.tvId">
              <div class="hot-card">
                <div class="hot-img">
                  <router-link :to="'/tvInfo/' + item.tvId">
                    <img :src="item.tvImg" alt="">
                  </router-link>
                </div>
                <div class="hot-info">
                  <h5 class="hot-name"><router-link :to="'/tvInfo/' + item.tvId">{{ item.tvName }}</router-link></h5>
                  <p class="hot-intro">{{ item.tvIntro }}</p>
                </div>
              </div>
            </b-col>
          </b-row>
        </div>
        <!-- 欧美好剧区域 -->
        <div class="new-container">
          <div class="divier-text">
              <b-nav align="center">
                  <b-nav-item>欧美好剧</b-nav-item>
              </b-nav>
          </div>
          <!-- 欧美好剧内容区域区域 -->
          <b-row>
            <b-col cols="6" sm="6" md="3" lg="3" v-for="item in meiList" :key="item.tvId">
              <div class="tv-card">
                <div class="tv-img">
                  <router-link :to="'/tvInfo/' + item.tvId">
                    <img :src="item.tvImg" alt="">
                  </router-link>
                </div>
                <div class="tv-info">
                  <h5 class="tv-name"><router-link :to="'/tvInfo/' + item.tvId">{{ item.tvName }}</router-link></h5>
                  <p class="tv-intro">{{ item.tvIntro }}</p>
                </div>
              </div>
            </b-col>
          </b-row>
        </div>
        <!-- 分割线 -->
        <Divider orientation="center" style="color:#777;">更多精彩敬请期待</Divider>
      </b-container>
  </div>
</template>

<script>
import swiper from "../subcomponents/swiper.vue"
export default {
  data(){
    return{
      hotList:[], // 热播好剧列表
      chooseList:[], // 热剧精选列表
      allPages:[], // 存放分页1的信息
      allPagesNext:[], // 存放分页2的信息
      pageindex:1, // 默认展示第一页数据
      place:["内地","香港","美国"],
      guoList:[], // 国产好剧列表
      gangList:[], // 港台好剧列表
      meiList:[], // 欧美好剧列表
      pageSize:4,
    }
  },
  created() {
    this.getHotTv();
    this.getChooseTv();
    this.getPlaceTv();
    this.getGangTv();
    this.getMeiTv();
  },
  methods:{
    getHotTv(){
      // 热播好剧
      this.$http.get("tv/findHot?pageNo=" + this.pageindex).then(result => {
        this.hotList =  result.body.list;
        this.allPages = result.body;
      })
    },
    changePage(index){
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageindex = index;
      this.getHotTv();
    },
    getChooseTv(){
      // 热播好剧
      this.$http.get("tv/findOrderByCount?pageNo=" + this.pageindex + "&pageSize=" +this.pageSize).then(result => {
        this.chooseList =  result.body.list;
        this.allPagesNext = result.body;
      })
    },
    changePageChoose(index){
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageindex = index;
      this.getChooseTv();
    },
    getPlaceTv(){
      this.$http.get("tv/findPlace?tvPlace=" + this.place[0]).then(result => {
        this.guoList =  result.body.list;
      })
    },
    getGangTv(){
      this.$http.get("tv/findPlace?tvPlace=" + this.place[1]).then(result => {
        this.gangList =  result.body.list;
      })
    },
    getMeiTv(){
      this.$http.get("tv/findPlace?tvPlace=" + this.place[2]).then(result => {
        this.meiList =  result.body.list;
      })
    },
  },
  components:{
    swiper
  }
}
</script>

<style lang="scss" scoped>
.tv-container{
  .new-container{
    .divier-text{
      padding: 0.5rem 0;
      font-size: 1.4rem;
      color:#666;
    }
    .tv-card{
    margin-bottom: 1rem;
    box-shadow: 0 0 4px #b8b6b6;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    .tv-img{
      overflow: hidden;
      border-top-left-radius: 15px;
      img{
        transition: all 0.6s;
        width: 100%;
        height: auto;
        border-top-left-radius: 15px;
      }
    }
    .tv-info{
      padding: 6px 3px;
      .tv-name{
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a{
          color:#555;
        }
        a:hover{
          color:#007bff;
        }
      }
      .tv-intro{
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    }
    .tv-card:hover{
      .tv-img{
        img{
          transform: scale(1.2);
        }
      }
    }
  }
  .page{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
  }

  .hot-container{
    .divier-text{
      padding: 0.5rem 0;
      font-size: 1.4rem;
      color:#ff5c38;
    }
    .hot-card{
    margin-bottom: 1rem;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border:1px solid #e2e2e2;
    padding: 2px;
    .hot-img{
      overflow: hidden;
      border-top-right-radius: 15px;
      img{
        transition: all 0.4s ease;
        width: 100%;
        height: auto;
        border-top-right-radius: 15px;
      }
    }
    .hot-info{
      padding: 6px 3px;
      .hot-name{
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a{
          color:#555;
        }
        a:hover{
          color:#ff5c38;
        }
      }
      .hot-intro{
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    }
    .hot-card:hover{
      .hot-img{
        box-shadow: 0 0 5px #b8b6b6;
        img{
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>